<template>
<div>
<!--  返回-->
  <van-nav-bar
      :title="userInfo.userName+'-空间'"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
<!--头像-->
  <div class="info">
    <div class="background">
      <img :src="userInfo.avatar" alt="">
    </div>
    <div class="authorInfo">
      <img :src="userInfo.avatar" alt=""><br>
      <span>{{userInfo.userName}}</span>
    </div>
  </div>
<!--  发帖-->
  <div class="nods" >
    <router-link tag="div" v-for="item in list" :key="item.postsId" :to="{path:'/nodeDetail',query:{postsId:item.postsId}}">
      <img :src="item.coverImgUrl" alt="">
    </router-link>
  </div>
</div>
</template>

<script>
import {getNoteList} from '../api/api'
export default {
  name: "AuthorDetail",
  data(){
    return {
      list:[],
      userInfo:{},
    }
  },
  created() {
    //my userId: 85
    getNoteList().then(res=>{
      res.rows.forEach(item=>{
        if(item.userId == this.$route.query.userId){
          this.list.push(item)
        }
      })
      this.userInfo=this.list[0];
    })
  },
  methods:{
    onClickLeft() {
      window.history.go(-1);
    },

  }
}
</script>

<style scoped lang="less">
.info {
  width: 100%;
  height: 25vh;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 5px solid #d4d4d4;
  margin-bottom: 10px;
  .background {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    opacity: .3;
    overflow: hidden;
    img {
      width: 100%;
      //height: 100%;
    }
  }
  .authorInfo {
    width: 30%;
    margin: 0 auto;
    text-align: center;
    font-weight: 700;
    img {
      width: 80px;
      height: 80px;
      box-shadow: 0 0 5px #6eeedf;
      border-radius: 50%;
    }
  }
}
.nods {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  div {
    width: 32.5%;
    height: 130px;
    margin: 1px;
    background-image: url("../assets/images/nothing.png");
    background-size: 100% 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>